<template>
  <view :class="isFullScreen ? 'full-screen-dialog' : 'animation-dialog'" v-if="needChangeVideo" :animation="animationData">
    <view v-if="needLoading" class="loading">
      <loading />
    </view>
    
    <view class="navbar-container">
      <view style="display: flex;">
        <view class="skit-cover">
          <image :src="currentAblum.ablum_banner" />
        </view>
        <view class="skit-detail">
          <view class="skit-title">{{currentAblum.ablum_name}}</view>
          <view class="skit-desc">{{currentAblum.ablum_episodes}}集全</view>
        </view>
      </view>
      <view class="back-icon iconfont-trade icon-close" style="z-index: 1999;" @tap="cancel">
        <icon class="tt-icon" color="#FFF" type="cancel"></icon>
      </view>
    </view>
    
    <!-- 剧集区间选择区域 -->
    <view class="episode-interval">
      <tab-bar :options="sortList" :current="current" @change="handleTabbarChange" />
    </view>
    
    <swiper :current="current" style="height:852rpx;" @change="switchTap">
      <swiper-item v-for="(item, index) in sortList" :key="index">
        <scroll-view id="card" scroll-y="true" style="height: 852rpx;">
          <view class="episode-card-con">
            <view 
              class="episode-card" 
              @tap="onTapEpisodes" 
              :data-episode-item="item" 
              v-for="(item, itemIndex) in currentAblum.episodes" 
              :key="itemIndex"
            >
              <image class="img-cover" :src="currentAblum.ablum_banner" />
              <view v-if="(item.episodes_id==currentVideo.episodes_id) || item.episodes_locking" class="episode-card-mask">
                <view v-if="item.episodes_id==currentVideo.episodes_id" class="watching">正在观看</view>
                <image class="lock" v-if="item.episodes_locking" src="/static/images/lock.png" />
              </view>
              <view class="episode-card-title">第{{item.episodes_num}}集</view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { rpxToPx } from "../../utils/index";
import TabBar from "../tabBar/index.vue";

export default {
  name: "ChangeVideoDialog",
  components: {
    TabBar,
  },
  data() {
    return {
      swiperHeight: 0,
      animationData: null,
      skitTitle: "",
      ablumEpisodes: 0,
      needLoading: true,
      current: 0
    }
  },
  
  props: {
    needChangeVideo: {
      type: Boolean,
      default: false
    },
    isFullScreen: {
      type: Boolean,
      default: false
    },
    currentAblum: {
      type: Object,
      default: () => ({})
    },
    currentVideo: {
      type: Object,
      default: () => ({}),
      
    },
    total: {
      type: Number,
      default: 0
    }
  },

  computed: {
    sortList() {
      const episodesPerTab = 30;
      const tabCount = Math.ceil(this.total / episodesPerTab);
      const result = [];
      
      for (let i = 0; i < tabCount; i++) {
        const start = i * episodesPerTab + 1;
        const end = Math.min((i + 1) * episodesPerTab, this.total);
        result.push(`${start}-${end}`);
      }
      
      return result;
    }
  },
  
  watch: {
    currentVideo(value) {
      console.log("currentVideo", value);
    }
  },
  
  mounted() {
    const dialogHeight = rpxToPx(1204);
    this.dialogHeight = dialogHeight;
    
    setTimeout(() => {
      this.needLoading = false;
    }, 3000);
  },
  
  methods: {
    handleTabbarChange(event) {
      const current = event.current;
      this.current = current;
    },
    
    switchTap(e) {
      const current = e.detail.current;
      console.log(current);
      this.current = current;
    },
    
    async requestData() {
      console.log("这里需要请求数据");
    },
    
    onTapEpisodes(e) {
      const episodeitem = e.currentTarget.dataset.episodeItem;
      // if (episodeitem.episodes_locking) {
      //   uni.showToast({
      //     title: "积分不足",
      //     icon: "none"
      //   });
      //   return;
      // }
      this.$emit("episodesChangeHandler", { episodeitem });
    },
    
    maskHandler() {
      this.needChangeVideo = false;
    },
    
    cancel() {
      this.$emit('cancel');
    }
  }
}
</script>

<style>
page {
  position: relative;
}

.mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0);
}

.err-view {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1999;
}

.bgShow {
  animation: fadeIn 0.2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

.bgLeave {
  animation: fadeOut 0.2s;
}

@keyframes fadeOut {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 0;
  }
}

.animation-dialog {
  position: fixed;
  z-index: 1999;
  height: 1204rpx;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #161616;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
}

.full-screen-dialog {
  position: fixed;
  z-index: 1999;
  width: 750rpx;
  height: 100vh;
  flex-shrink: 0;
  background: var(--bg-color-dark-const-bg-inverse-2, rgba(0, 0, 0, 0.60));
  bottom: 0;
  transform-origin: left top !important;
  right: 0;
}

.navbar-container {
  width: 750rpx;
  display: flex;
  padding-top: 28rpx;
  padding-bottom: 28rpx;
  justify-content: space-between;
}

.skit-cover {
  margin-left: 32rpx;
  display: flex;
}

.skit-cover image {
  width: 72rpx;
  height: 96rpx;
}

.skit-detail {
  margin-left: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.skit-title {
  color: var(--text-text-primary, #FFF);
  font-family: PingFang SC;
  font-size: 30rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 30rpx;
}

.skit-desc {
  color: var(--text-text-tertiary, rgba(255, 255, 255, 0.50));
  font-family: PingFang SC;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  margin-top: 12rpx;
  line-height: 24rpx;
}

.back-icon {
  width: 56rpx;
  height: 56rpx;
  margin-right: 32rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(22, 24, 35, 0.05);
}

.episode-interval {
  z-index: 1999;
  width: 718rpx;
  margin-left: 32rpx;
  height: 80rpx;
  margin-top: 36rpx;
}

.episode-card {
  width: 212rpx;
  height: 284rpx;
  border-radius: 8rpx;
  border: 2rpx solid var(--line-line-primary, rgba(255, 255, 255, 0.08));
  overflow: hidden;
  position: relative;
}

.img-cover {
  width: 212rpx;
  height: 284rpx;
}

.episode-card-title {
  position: absolute;
  bottom: 12rpx;
  left: 68rpx;
  color: var(--text-text-primary, #FFF);
  text-align: center;
  text-shadow: 0px 2rpx 2rpx rgba(0, 0, 0, 0.15);
  font-family: PingFang SC;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.episode-card-mask {
  width: 212rpx;
  height: 284rpx;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--mask-sd-secondary, rgba(0, 0, 0, 0.50));
  display: flex;
  justify-content: center;
  align-items: center;
}

.watching {
  color: var(--text-text-primary, #FFF);
  text-align: center;
  font-family: PingFang SC;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
}

.lock {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.episode-card-con {
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 22rpx; 
  width: 684rpx !important;
  padding: 32rpx 32rpx 0 32rpx;
}

.loading {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: black;
}
</style> 